
axios.get('/dashboard').then(res => {
  console.log(res);
  $("[name=salary]").text(res.data.data.overview.salary)
  $("[name=student_count]").text(res.data.data.overview.student_count)
  $("[name=age]").text(res.data.data.overview.age)
  $("[name=group_count]").text(res.data.data.overview.group_count);


  //第一个
  (function () {
    let year = res.data.data.year
    let money = (year.map(ele => {
      return ele.salary
    }))



    let myChart = echarts.init(document.getElementById('line'));
    option = {
      title: {
        text: '2021全学科薪资走势',
        left: 10,
        top: 15,
        textStyle: {
          fontSize: 16
        }
      },

      tooltip: {
        type: 'true',
        trigger: 'axis',
      },

      grid: {
        left: '10%',
        top: '20%',

      },

      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#499FEE' // 0% 处的颜色
          }, {
            offset: 1, color: '#5D75F0' // 100% 处的颜色
          }]
        },
      ],

      xAxis: {

        type: 'category',
        boundaryGap: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          },
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',]
        },

      },
      axisLabel: {
        show: true,
        color: '#999',

      },

      // y轴样式
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: ['#ccc']
          }
        }
      },

      series: [
        {
          type: 'line',
          smooth: true,
          symbol: 'emptyCircle',
          symbolSize: 10,
          lineStyle: {
            width: 5,
          },


          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#4d96ee' // 0% 处的颜色
              }, {
                offset: 0.8, color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
              }]
            }
          },

          emphasis: {
            focus: 'series'
          },
          data: money
        },
      ]
    }
    myChart.setOption(option);
  })();
  //第2个
  (function () {

    let num = res.data.data.salaryData.map(ele => {
      return { name: ele.label, value: ele.b_count + ele.g_count }

    })

    let myChart = echarts.init(document.getElementById('salary')),

      option = {
        title: {
          text: '班级薪资分布',
          top: 15,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },

        tooltip: {
          trigger: 'item'
        },
        legend: {

          bottom: '6%',


        },

        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A', '#ee6666'],

        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            radius: ['50%', '65%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,

            },

            labelLine: {
              show: false, // 刻度线，不显示
            },
            data: num
          }
        ]
      };


    myChart.setOption(option);

  })();
  //第3个
  (function () {
    $('#btns .btn').on('click', function () {
      $(this).addClass('btn-blue').siblings().removeClass('btn-blue')
      const id = $(this).html()
      const groupData = res.data.data.groupData
      const salary = groupData[id].map((ele) => ele.salary)
      const hope_salary = groupData[id].map((ele) => ele.hope_salary)
      let myChart = echarts.init(document.getElementById('lines'))
      option = {
        title: {
          text: '班级每组薪资',
          top: 15,
          left: 15

        },
        // tooltip: {
        //   trigger: 'axis'
        // },
        grid: {
          left: 50,
          bottom: 50,
          top: 60,
          right: 50
        },

        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: name,
            //X轴虚线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc',
                type: "dashed"
              }
            },
            axisLabel: {
              color: '#999',
            },
          }

        ],

        yAxis: [
          {
            type: 'value',

            //设置y轴虚线
            splitLine: {
              lineStyle: {
                type: 'dashed',
              },
            },

            axisLabel: {
              color: '#999',
            },





          },

        ],
        tooltip: {
          trigger: 'item',
        },


        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34D39A', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
              },
            ],
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
              },
            ],
          },
        ],

        series: [
          {



            name: '期望薪资',
            type: 'bar',
            data: hope_salary,



          },



          {
            name: '就业薪资',
            type: 'bar',
            data: salary,


          }
        ]
      };



      myChart.setOption(option);

    })

    $('#btns .btn').eq(0).click()

  })();

  //第4个
  (function () {


    const { data: { data: { salaryData } } } = res
    // console.log(salaryData[0].g_count);
    let myChart = echarts.init(document.getElementById('gender'))

    var datas = [

      // ////////////////////////////////////////
      [
        { name: salaryData[0].label, value: salaryData[0].b_count },
        { name: salaryData[1].label, value: salaryData[1].b_count },
        { name: salaryData[2].label, value: salaryData[2].b_count },
        { name: salaryData[3].label, value: salaryData[3].b_count },

      ],
      ////////////////////////////////////////
      [
        { name: salaryData[0].label, value: salaryData[0].g_count },
        { name: salaryData[1].label, value: salaryData[1].g_count },
        { name: salaryData[2].label, value: salaryData[2].g_count },
        { name: salaryData[3].label, value: salaryData[3].g_count },

      ]
    ];
    option = {


      title: [
        {
          text: '男女薪资分布',
          left: 10,
          top: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        {
          text: '男生',
          left: '50%',
          top: '45%',
          textAlign: 'center',
          textStyle: {
            fontSize: 12,
          },
        },
        {
          text: '女生',
          left: '50%',
          top: '85%',
          textAlign: 'center',
          textStyle: {
            fontSize: 12,
          },
        },
      ],

      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      tooltip: {
        trigger: 'item',
      },




      series: datas.map(function (data, idx) {
        var top = idx * 40;
        return {
          type: 'pie',
          radius: [40, 60],
          top: top + '%',
          height: '50%',
          left: 'center',
          width: 400,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },

          labelLine: {

            length: 20,
            length2: 15,
            maxSurfaceAngle: 90
          },

          data: data
        };
      })
    };
    myChart.setOption(option);




  })();

  //第5个
  (function () {
    console.log(res.data.data.provinceData);




    // console.log(provinceData);


    let myChart = echarts.init(document.getElementById('map'))

    var name_title = "中国人民大学2017年各省市计划录取人数"
    var subname = ''
    var nameColor = " rgb(0, 0, 0)"
    var name_fontFamily = '等线'
    var subname_fontSize = 15
    var name_fontSize = 18
    var mapName = 'china'
    //     var data =  res.data.data.provinceData.map(ele => {
    //       return [{ name: ele.name, value: ele.value }]
    // })
    var data = [
      { name: "北京", value: 17 },
      { name: "天津", value: 4 },
      { name: "河北", value: 2 },
      { name: "山西", value: 1 },
      { name: "内蒙古", value: 3 },
      { name: "辽宁", value: 1 },
      { name: "吉林", value: 2 },
      { name: "黑龙江", value: 3 },
      { name: "上海", value: 4 },
      { name: "江苏", value: 1 },
      { name: "浙江", value: 2 },
      { name: "安徽", value: 3 },
      { name: "福建", value: 4 },
      { name: "江西", value: 1 },
      { name: "山东", value: 2 },
      { name: "河南", value: 3 },
      { name: "湖北", value: 4 },
      { name: "湖南", value: 1 },
      { name: "重庆", value: 2 },
      { name: "四川", value: 3 },
      { name: "贵州", value: 4 },
      { name: "云南", value: 1 },
      { name: "西藏", value: 2 },
      { name: "陕西", value: 3 },
      { name: "甘肃", value: 4 },
      { name: "青海", value: 1 },
      { name: "宁夏", value: 2 },
      { name: "新疆", value: 0 },
      { name: "广东", value: 4 },
      { name: "广西", value: 1 },
      { name: "海南", value: 2 },]


    var geoCoordMap = {};
    var toolTipData = res.data.data.provinceData.map(ele => {
      return { name: ele.name, value: [{ name: ele.name, value: ele.value }] }
    })


    // {name:"北京",value:[{name:"北京",value:95}]},
    // {name:"天津",value:[{name:"天津",value:22}]},
    // {name:"河北",value:[{name:"河北",value:60}]},
    // {name:"山西",value:[{name:"山西",value:40}]},
    // {name:"内蒙古",value:[{name:"内蒙古",value:23}]},
    // {name:"辽宁",value:[{name:"辽宁",value:39}]},
    // {name:"吉林",value:[{name:"吉林",value:41}]},
    // {name:"黑龙江",value:[{name:"黑龙江",value:35}]},
    // {name:"上海",value:[{name:"上海",value:12}]},
    // {name:"江苏",value:[{name:"江苏",value:47}]},
    // {name:"浙江",value:[{name:"浙江",value:57}]},
    // {name:"安徽",value:[{name:"安徽",value:57}]},
    // {name:"福建",value:[{name:"福建",value:59}]},
    // {name:"江西",value:[{name:"江西",value:49}]},
    // {name:"山东",value:[{name:"山东",value:67}]},
    // {name:"河南",value:[{name:"河南",value:69}]},
    // {name:"湖北",value:[{name:"湖北",value:60}]},
    // {name:"湖南",value:[{name:"湖南",value:62}]},
    // {name:"重庆",value:[{name:"重庆",value:47}]},
    // {name:"四川",value:[{name:"四川",value:65}]},
    // {name:"贵州",value:[{name:"贵州",value:32}]},
    // {name:"云南",value:[{name:"云南",value:42}]},
    // {name:"西藏",value:[{name:"西藏",value:5}]},
    // {name:"陕西",value:[{name:"陕西",value:38}]},
    // {name:"甘肃",value:[{name:"甘肃",value:28}]},
    // {name:"青海",value:[{name:"青海",value:5}]},
    // {name:"宁夏",value:[{name:"宁夏",value:10}]},
    // {name:"新疆",value:[{name:"新疆",value:36}]},
    // {name:"广东",value:[{name:"广东",value:63}]},
    // {name:"广西",value:[{name:"广西",value:29}]},
    // {name:"海南",value:[{name:"海南",value:8}]},

    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    mapFeatures.forEach(function (v) {
      // 地区名称
      var name = v.properties.name;
      // 地区经纬度
      geoCoordMap[name] = v.properties.cp;

    });




    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            // name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };

    option = {
      title: {
        text: '籍贯分布',
        // subtext: subname,
        x: 'left',
        top: '10',
        left: '10'
      },
      tooltip: {
        trigger: 'item',
        // formatter: function (params) {
        //   if (typeof (params.value)[2] == "undefined") {
        //     var toolTiphtml = ''
        //     for (var i = 0; i < toolTipData.length; i++) {
        //       if (params.name == toolTipData[i].name) {
        //         // toolTiphtml += toolTipData[i].name+':<br>'
        //         for (var j = 0; j < toolTipData[i].value.length; j++) {
        //           toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
        //         }
        //       }
        //     }
        //     // console.log(toolTiphtml)
        //     // console.log(convertData(data))
        //     return toolTiphtml;
        //   }
        // }
        trigger: 'item',
        formatter: `{b}: {c} 位学员`,
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },

      },

      visualMap: {
        min: 0,
        max: 6,

        left: 'left',
        top: 'bottom',
        text: ['6', '0'], // 文本，默认为数值文本

        seriesIndex: [1],
        inRange: {
          // color: ['#3B5077', '#031525'] // 蓝黑
          // color: ['#ffc0cb', '#800080'] // 红紫
          // color: ['#3C3B3F', '#605C3C'] // 黑绿
          // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
          // color: ['#23074d', '#cc5333'] // 紫红
          color: ['#FFFFFF', '#5097FF'] // 蓝绿
          // color: ['#1488CC', '#2B32B2'] // 浅蓝
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿

        }
      },

      geo: {
        show: true,
        map: mapName,
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true,
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
            textStyle: {
              color: '#3B5077'
            }
          },
          emphasis: {
            areaColor: '#34D39A',
            textStyle: {
              color: '#3B5077'
            }
          }
        }
      },

      series: [{

        type: 'scatter',
        coordinateSystem: '',
        data: convertData(data),
        symbolSize: function (val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          
          normal: {
            color: '#05C3F9'
          }
        }
      },

      {
        type: 'map',
        map: mapName,
        geoIndex: 0,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true,
            textStyle: {
              color: '#vvvvvv'
            }
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        },
        animation: true,
        data: data
      },



      ]
    }











    myChart.setOption(option);

  })()

})


